<template>
  <el-form ref="loginFormRef" :model="loginForm" :rules="rules" size="medium">
    <!-- 增加的输入项目 start -->
    <el-form-item prop="loginName" class="user" :class="{ warn: userWarning }">
      <i class="inp-icon el-icon-user"></i>
      <el-input
        v-model="loginForm.loginName"
        name="loginName"
        placeholder="请输入用户名或者手机号"
        @focus="userWarning = false" />
      <span class="err-tip" v-show="userWarning">{{ errWarning }}</span>
    </el-form-item>
    <el-form-item prop="loginPassword" class="password" :class="{ warn: passwordWarning }">
      <i class="inp-icon el-icon-lock"></i>
      <el-input
        v-model="loginForm.loginPassword"
        :type="inputStyle"
        name="loginPassword"
        label="密码"
        placeholder="请输入密码"
        @keyup.enter.native="alyOnSubmit"
        @focus="passwordWarning = false">
        <span slot="suffix" @click="typeStyle" class="icon-box">
          <i class="el-input__icon iconfont icon-biyan" v-show="inputStyle === 'password'"></i>
          <i class="el-input__icon iconfont icon-zhengyan-01" v-show="inputStyle === 'text'"></i>
        </span>
      </el-input>
      <span class="err-tip" v-show="passwordWarning">{{ errWarning }}</span>
    </el-form-item>
    <!-- 增加的输入项目 end -->
    <!-- <el-form-item prop="mobile">
      <i class="inp-icon el-icon-mobile-phone"></i>
      <el-input v-model="loginForm.mobile" placeholder="请输入手机号" :maxlength="11" clearable></el-input>
    </el-form-item> -->
    <el-form-item prop="smCode">
      <i class="inp-icon el-icon-key"></i>
      <el-input v-model="loginForm.smCode" placeholder="请输入验证码" :maxlength="6" clearable>
        <el-button slot="append" class="send-btn" :class="{ disabled: sendCodeStatus === 'send' }" @click="sendCode">
          {{ codeBtnDisplay }}
        </el-button>
      </el-input>
    </el-form-item>
    <div class="options">
      <div class="remember">
        <el-checkbox v-model="remember">记住密码</el-checkbox>
      </div>
      <div class="forget">
        <el-button type="text" @click="showDialog">忘记密码</el-button>
      </div>
    </div>
    <div class="commit">
      <div class="btn" @click.stop="alyOnSubmit">登 录</div>
    </div>
  </el-form>
</template>
<script>
import { loginUnifiedNew, sendSignCodeByAliyun } from '@api/modules/user.js'
import { phoneReg, checkCodeReg } from '@utility/regExps.js'
export default {
  name: 'PhoneForm',
  data() {
    return {
      loginForm: {
        loginName: '', // 账号
        loginPassword: '', // 密码
        // mobile: '', // 手机号
        smCode: '', // 短信验证码
      },
      rules: {
        loginName: [{ required: true, message: '请填写用户名', trigger: 'blur' }],
        loginPassword: [{ required: true, message: '请填写密码', trigger: 'blur' }],
        // 验证规则
        mobile: [
          {
            required: true,
            message: '请输入有效的手机号',
            trigger: 'blur',
            pattern: phoneReg,
          },
        ],
        // 短信验证码验证
        smCode: [
          {
            required: true,
            message: '请输入有效的验证码',
            trigger: 'blur',
            pattern: checkCodeReg,
          },
        ],
      },

      cutdownSec: 0,
      sendCodeStatus: 'init', // init, send, retry
      cutdownTimer: null,

      remember: false,
      userWarning: false,
      errWarning: '',
      inputStyle: 'password',
      passwordWarning: false,
    }
  },
  computed: {
    codeBtnDisplay() {
      if (this.sendCodeStatus === 'init') {
        return '发送验证码'
      } else if (this.sendCodeStatus === 'send') {
        return this.cutdownSec + ' 秒'
      }
      return '重新发送'
    },
    userInfo() {
      return this.$store.getters.userInfo
    },
  },
  mounted() {
    this.logInfo()
  },
  methods: {
    // 发送验证码
    sendCode() {
      if (this.sendCodeStatus === 'send') {
        return
      }
      this.$refs.loginFormRef.validateField('loginName', invalid => {
        if (!invalid) {
          const params = {
            mobile: this.loginForm.loginName,
          }
          sendSignCodeByAliyun(params).then(res => {
            if (res.status === 200) {
              this.startCutdown()
            }
          })
        }
      })
    },
    // 验证码有效期开始计时
    startCutdown() {
      this.clearCutdownTimer()
      this.sendCodeStatus = 'send'
      this.cutdownSec = 60
      this.cutdownTimer = setInterval(() => {
        this.cutdownSec--
        if (this.cutdownSec <= 0) {
          this.clearCutdownTimer()
          this.sendCodeStatus = 'retry'
        }
      }, 1000)
    },
    // 清除计时器
    clearCutdownTimer() {
      if (this.cutdownTimer) {
        clearInterval(this.cutdownTimer)
      }
    },
    // 阿里云登录
    alyOnSubmit() {
      this.$refs.loginFormRef.validate(valid => {
        if (valid) {
          loginUnifiedNew({
            telephone: '',
            smCode: this.loginForm.smCode,
            loginName: this.loginForm.loginName,
            loginPassword: this.loginForm.loginPassword,
          }).then(res => {
            if (res.status === 200) {
              localStorage.setItem('efficacy_remember', this.remember)
              localStorage.setItem('efficacy_loginName', this.loginForm.loginName)
              localStorage.setItem('efficacy_loginPassword', window.btoa(this.loginForm.loginPassword))
              this.$emit('login-success', res.data || {})
              this.passwordWarning = false
              this.userWarning = false
            } else if (res.status === 500) {
              this.errWarning = res.message
              if (res.message.indexOf('密码错误') !== -1) {
                this.passwordWarning = true
              } else if (res.message.indexOf('用户不存在') !== -1) {
                this.userWarning = true
              }
            }
          })
        }
      })
    },

    /**
     * 增加的方法 start
     */
    typeStyle() {
      this.inputStyle = this.inputStyle === 'password' ? 'text' : 'password'
    },
    logInfo() {
      const loginName = localStorage.getItem('efficacy_loginName')
      const loginPassword = localStorage.getItem('efficacy_loginPassword')
      if (loginPassword) {
        this.loginForm.loginName = loginName
        this.loginForm.loginPassword = window.atob(loginPassword)
        this.remember = true
      }
    },
    showDialog() {
      this.$emit('show-dialog', true)
    },
  },
}
</script>
<style lang="scss" scoped>
.el-form {
  .commit {
    margin-top: 0.1rem;
    cursor: pointer;
    .btn {
      height: 0.4rem;
      background-color: #b72c25;
      color: #fff;
      font-size: 0.2rem;
      text-align: center;
      line-height: 0.4rem;
    }
  }
  // 增加的样式 start
  .el-form-item {
    .icon-box {
      cursor: pointer;
      .iconfont {
        font-size: 0.4rem;
        line-height: 0.4rem;
        color: #767676;
      }
    }
    .password,
    .user {
      .err-tip {
        position: absolute;
        left: 0;
        bottom: -22px;
        line-height: 22px;
        color: #fc6969;
        font-size: 12px;
      }
    }
    .warn {
      .el-input__inner {
        border-color: #fc6969;
      }
    }
  }
  .options {
    display: flex;
    align-items: center;
    height: 24px;
    ::v-deep .remember {
      .el-checkbox {
        display: flex;
        align-items: center;
        .el-checkbox__label {
          color: #888;
          font-size: 0.16rem;
        }
      }
      .el-checkbox:hover {
        .el-checkbox__inner {
          border-color: #cb9d67;
        }
      }
      .is-checked {
        .el-checkbox__inner {
          background-color: #cb9d67;
          border-color: #cb9d67;
        }
        .el-checkbox__inner::after {
          border-width: 0.03rem;
        }
      }
      .is-focus {
        .el-checkbox__inner {
          border-color: #cb9d67;
        }
      }
    }
    .forget {
      flex: 1;
      text-align: right;
    }
  }
}
</style>
